<template>
  <div>
    <todo-input />
    <todo-list :todoList="todoList" />
  </div>
</template>

<script lang="ts">
import store from "./store";
import { computed, defineComponent, onMounted } from "vue";
import TodoInput from "./components/TodoInput/index.vue";
import TodoList from "./components/TodoList/index.vue";
import { IUseTodo, useTodo } from "./hooks";

export default defineComponent({
  name: "App",
  components: { TodoInput, TodoList },
  setup() {
    const { setTodoList }: IUseTodo = useTodo();
    onMounted(() => {
      setTodoList();
    });
    return {
      todoList: computed(() => store.state.list),
    };
  },
});
</script>

<style lang="stylus" scoped></style>
